workspacesView: Scale inactive workspaces

As per the latest mockups, then horizontally snapping, the active
workspace should be highlighted. Because WorkspacesView clips to
allocation, we cannot simply scale up the active one. Instead,
scale down the inactive ones.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1613>

diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index f9e7fad4bb3b8e50d472f78ca9e0db714ea6cc8f..8a9faf4ead3d14304e128701f50c8f1041fdb908 100644 (file)
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Workspace */
 
-const { Clutter, GLib, GObject, Meta, St } = imports.gi;
+const { Clutter, GLib, GObject, Graphene, Meta, St } = imports.gi;
 
 const Background = imports.ui.background;
 const DND = imports.ui.dnd;
@@ -936,6 +936,7 @@ class Workspace extends St.Widget {
     _init(metaWorkspace, monitorIndex) {
         super._init({
             style_class: 'window-picker',
+            pivot_point: new Graphene.Point({ x: 0.5, y: 0.5 }),
             layout_manager: new WorkspaceLayout(metaWorkspace, monitorIndex),
             reactive: true,
         });

diff --git a/js/ui/workspacesView.js b/js/ui/workspacesView.js
index ac0729dd07f33fc5d1216f77124a7bdd710442c2..ab8c78c5f65f2c436da612501936660e7906c418 100644 (file)
--- a/js/ui/workspacesView.js
+++ b/js/ui/workspacesView.js
@@ -17,6 +17,8 @@ const MUTTER_SCHEMA = 'org.gnome.mutter';
 const WORKSPACE_MIN_SPACING = 24;
 const WORKSPACE_MAX_SPACING = 80;
 
+const WORKSPACE_INACTIVE_SCALE = 0.94;
+
 var WorkspacesViewBase = GObject.registerClass({
     GTypeFlags: GObject.TypeFlags.ABSTRACT,
 }, class WorkspacesViewBase extends St.Widget {
@@ -83,6 +85,7 @@ class WorkspacesView extends WorkspacesViewBase {
         this._fitModeAdjustment = fitModeAdjustment;
         this._fitModeNotifyId = this._fitModeAdjustment.connect('notify::value', () => {
             this._updateVisibility();
+            this._updateWorkspacesState();
             this.queue_relayout();
         });
 
@@ -212,6 +215,20 @@ class WorkspacesView extends WorkspacesViewBase {
         return Math.clamp(spacing, WORKSPACE_MIN_SPACING, WORKSPACE_MAX_SPACING);
     }
 
+    _updateWorkspacesState() {
+        const adj = this._scrollAdjustment;
+
+        // Fade and scale inactive workspaces
+        this._workspaces.forEach((w, index) => {
+            const distanceToCurrentWorkspace = Math.abs(adj.value - index);
+
+            const progress = 1 - Math.clamp(distanceToCurrentWorkspace, 0, 1);
+
+            const scale = Util.lerp(WORKSPACE_INACTIVE_SCALE, 1, progress);
+            w.set_scale(scale, scale);
+        });
+    }
+
     vfunc_allocate(box) {
         this.set_allocation(box);
 
@@ -349,6 +366,8 @@ class WorkspacesView extends WorkspacesViewBase {
             this._workspaces[j].destroy();
             this._workspaces.splice(j, 1);
         }
+
+        this._updateWorkspacesState();
     }
 
     _activeWorkspaceChanged(_wm, _from, _to, _direction) {
@@ -411,6 +430,7 @@ class WorkspacesView extends WorkspacesViewBase {
             metaWorkspace.activate(global.get_current_time());
         }
 
+        this._updateWorkspacesState();
         this.queue_relayout();
     }
 });